<template>
    <el-menu :collapse="Menu.isCollapse" :collapse-transition="false" :default-active="Menu.active"
             :default-openeds="Menu.openeds"
             class="el-menu-vertical-demo"
             router
             unique-opened
             @select="handleSelect">
        <div class="logo">
            <div v-if="Menu.isCollapse" class="true">
                <el-icon>
                    <OfficeBuilding/>
                </el-icon>
            </div>
            <div v-else class="false">
                <span>南宫亚定点医院</span>
            </div>
        </div>
        <el-menu-item v-for="item in menuItem" :key="item.menuId" :index="item.path">
            <el-icon>
                <i :class="item.icon"/>
            </el-icon>
            <template #title>
                {{ item.name }}
            </template>
        </el-menu-item>
        <el-sub-menu v-for="item in menuItemCh" :key="item.menuId" :index="item.path">
            <template #title>
                <el-icon>
                    <i :class="item.icon"/>
                </el-icon>
                <span>{{ item.name }}</span>
            </template>
            <el-menu-item v-for="itemCh in item.children" :key="itemCh.menuId" :index="itemCh.path">
                {{ itemCh.name }}
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script lang='ts' setup>
// DEMO 2023-4-11 19:06:总感觉有问题，整理思路，多测试几下
import { OfficeBuilding } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'
import { useMenu } from '@/store'
import { MenuList } from '@/ts/type'

const Menu = useMenu()
const menuList = ref<MenuList[]>(Menu.list)
const handleSelect = (index: string, indexPath: string[]) => {
  if (indexPath.length === 1) return Menu.changeActive(indexPath[0])
  Menu.changeActive(indexPath[1])
  Menu.changeOpeneds(indexPath)
}
const menuItemCh = computed(() => menuList.value.filter(val => val.children.length !== 0))
const menuItem = computed(() => menuList.value.filter(val => val.children.length === 0))
</script>

<style lang='scss' scoped>
.logo {
  line-height: $header_height;
  text-align: center;
  color: var(--el-color-primary);
  font-weight: 700;
  font-size: 20px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 160px;
  min-height: 400px;
}
</style>